<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建项目</title>
    <link href="../css/creat-pro.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<!--header-->
<header id="header" class="header">
    <div class="header-info left"><i></i><a href="mems-pro-creat.html">创建项目</a></div>
    <div class="right-user right">
         <div class="clear t" >             <div id="headusername" class="role"></div>             <div class="icon"></div>         </div>
        <div class="head-down">
            <ul><li><a href="edit-pwd.html">修改密码</a></li><li><a onclick="loginOut()">退出系统</a></li></ul></div><div>
    </div>
    </div>
</header>
<!--menu-->
<aside id="aside" class="aside">
    <div class="logo">运营平台</div>
    <ul class="menu" id="asidemenu">
    </ul>
</aside>


<!--content-->
<div class="content"  style="height: 100%;">
    <div class="creat-pro" style="height: 80%;">
        <div class="pro-head"><i></i>创建项目</div>
        <div class="steps">
            <div class="line">
                <i></i>
                <i></i>
            </div>
            <div class="circle">
                <p class="done">1</p><p>2</p><p>3</p>
            </div>
            <div class="s-d">
                <p class="done">选择医院</p><p>完善信息</p><p>完成</p>
            </div>
        </div>

        <div class="search-box">
            <h3>选择医院</h3>
            <div class="search-input">
                <form action="javascript:;" id="serchkeywords_form">
                    <input type="text" name="" id="serchkeywords">
                </form>
                <div style="display: none;">
                    <input type="hidden" id="area-v"/>
                    <input type="hidden" id="provice-v">
                    <input type="hidden" id="city-v">
                    <input type="hidden" id="hospital-v">
                </div>
            </div>

            <div class="show-box"  style="display: none;overflow-y:scroll;" id="showkeylist">
                <ul class="key-list" id="keyul">
                没有匹配到！
                </ul>
            </div>

            <div class="show-box" style="display: none;" id="showselect">
                <div class="select-area clear">
                    <div class="wap" style="width: 15%;">
                        <ul id="district" >
                        </ul>
                    </div>

                    <div class="wap" style="width: 20%;">
                        <ul id="provice">
                        </ul>
                    </div>
                    <div class="wap" style="width: 25%;">
                        <ul id="city">
                           
                        </ul>
                    </div>
                    <div class="wap" style="width: 40%;">
                        <ul id="hospital">
                        </ul>
                    </div>
                </div>
            </div>

            <div class="btns">
                <a class="pro-btn pro-sure" id="nextstep">下一步</a>
            </div>
            <div id="createProDirectly">医院未找到？&emsp;<a class="pro-btn pro-sure pro-sure-can" href="mems-pro-creat-2.html">直接创建</a></div>
        </div>
    </div>
</div>
<script src="../js/jquery.min.js"></script>
<script src="../js/jquery.cookie.js"></script>
<script src="../js/common.js"></script>
<script type="text/javascript">


//权限控制

var roleid = $.cookie('userrole');
if(roleid == 0 || roleid==1 || roleid == 2){
    $('#createProDirectly').remove()
}

function getDistrictdom(id){
    var _id = $('#'+id);
    $.ajax({
        url:_ip+'/common/getDistrict',
        type: 'GET',
        dataType: 'jsonp',
        contentType:'application/json',
        jsonpCallback: 'getDistrict',
        success: function(json) {
            var json = json.data;
            var h = '';
            for(var k = 0 , kk = json.length; k < kk; k++){
                h += '<li>'+json[k]+'<input type="hidden" value="'+json[k]+'"/><i>></i></li>'
            }            
            _id.html(h);

        }
    })
}
function getProvicedom(id,area){  //获取省份列表
    $.ajax({
        url:_ip+'/common/getPrivence?area='+area,
        type: 'GET',
        dataType: 'jsonp',
        contentType:'application/json',
        jsonpCallback: 'getprovice',
        success: function(json) {
            var json = json.data;
            var h = '';
            for(var k = 0 , kk = json.length; k < kk; k++){
                h += '<li>'+json[k]+'<input type="hidden" value="'+json[k]+'"/><i>></i></li>'
            }            
            $('#'+id).html(h);
        }
    })
}
function getCity(id,provice,area){ //获取城市列表
    $.ajax({
        url:_ip+'/common/getCity?area='+area+'&privence='+provice,
        type: 'GET',
        dataType: 'jsonp',
        contentType:'application/json',
        jsonpCallback: 'getcity',
        success: function(json) {
            var json = json.data;
            var h = '';
            for(var k = 0 , kk = json.length; k < kk; k++){
                h += '<li>'+json[k]+'<input type="hidden" value="'+json[k]+'"/><i>></i></li>'
            }           
            $('#'+id).html(h);
        }
    })
}

function getHospital(id,city){ //获取医院列表
    var data= {};
    $.ajax({
        url:_ip+'/project/searchProject?city='+city,
        type: 'GET',
        xhrFields: {
           withCredentials: true
        },
        crossDomain: true,
        dataType: 'json',
        contentType:'application/json',
        success: function(json) {

            if(json.message === 'LOGIN') {
                window.location.href = 'user-login.html';
                return false;
            }

            var json = json.data;
            var h = '';
            for(var k = 0 , kk = json.length; k < kk; k++){
                h += '<li>'+json[k].name+'<input type="hidden" value="'+json[k].name+'" data-id="'+json[k].id+'"/></li>'
            }
            $('#hospital').html(h);
        }
    })
}

function getinputVal(id1,id2,id3,id4) {
    var v1 = $('#'+id1).val() || null;
    var v2 = $('#'+id2).val() || null;
    var v3 = $('#'+id3).val() || null;
    var v4 = $('#'+id4).val() || null;
    var t = '';
    if(!v1){
        t = '';
    }
    if(v1){
        t = v1;
    }
    if (v2){
        t = v1 +'／' + v2
    }
    if(v3){
        t = v1 +'／' + v2+'／' + v3;
    }
    if(v4){
        t = v1 +'／' + v2+'／' + v3+'／' + v4;

    }
    $('#serchkeywords').val(t);
    $('#nextstep').removeClass('pro-sure-can');
    $('#nextstep').attr({'href':'javascript:'})
}
getDistrictdom('district');


//获取医院的详细信息
function geihospitaldetaildata(id) {
    $.ajax({
        url:_ip+'/project/select?id='+id,
        type: 'GET',
        dataType: 'jsonp',
        contentType:'application/json',
        jsonpCallback: 'hisdata',
        success: function(json) {
            var json = json.data;
            window.localStorage.setItem('hospitalData',JSON.stringify(json));
            $('.pro-btn').addClass('pro-sure-can');
            $('#nextstep').attr({'href':'mems-pro-creat-2.html?p=1'})
        }
    })
}

$('#district').on('click','li',function(){
    $('#city').html('');
    $('#hospital').html('');
    var d = $(this).find('input').val();
    $(this).addClass('current');
    $(this).siblings().removeClass('current');
    getProvicedom('provice',d);
    $('#serchkeywords').val(d);
    $('#area-v').val(d);
    $('#provice-v').val('');
    $('#city-v').val('');
    $('#hospital-v').val('');

    getinputVal('area-v','provice-v','city-v','hospital-v');

})
$('#provice').on('click','li',function(){
    $('#hospital').html('');
    $(this).addClass('current');
    $(this).siblings().removeClass('current');
    var a,p;
    $('#district').find('li').each(function(){
        if($(this).hasClass('current')){
            a = $(this).find('input').val();
        }
    })
    p = $(this).find('input').val();
    $('#provice-v').val(p);
    $('#city-v').val('');
    $('#hospital-v').val('');

    getinputVal('area-v','provice-v','city-v','hospital-v')

    getCity('city',p,a);
})
$('#city').on('click','li',function(){
    $(this).addClass('current');
    $(this).siblings().removeClass('current');

    var c = $(this).find('input').val();
    $('#city-v').val(c);
    $('#hospital-v').val('');

    getinputVal('area-v','provice-v','city-v','hospital-v')
    getHospital('hospital',c);
})
$('#hospital').on('click','li',function () {
    $(this).addClass('current');
    $(this).siblings().removeClass('current');
    var h = $(this).find('input').val();
    $('#hospital-v').val(h);
    getinputVal('area-v','provice-v','city-v','hospital-v');
    geihospitaldetaildata(parseInt($(this).find('input').attr('data-id')));

})


document.onkeydown=function(e) {

    e = e || event;
//   console.log(e.keyCode)
    if (e.keyCode == 8) {
        $('#area-v').val('');
        $('#provice-v').val('');
        $('#city-v').val('');
        $('#hospital-v').val('');
        getinputVal('area-v','provice-v','city-v','hospital-v');
        $('#hospital').html('');
        $('#city').html('');
        $('#provice').html('');
        $('#district').html('');
        getDistrictdom('district');
    }
}

    var showkeylist = $('#showkeylist');
    var showselect  = $('#showselect');
    $('#serchkeywords').on('focus',function(e){




        var s = showkeylist.css('display');
        if(s == 'block'){
            showkeylistdo()
        }else{
            showselectarea();
            $('#provice,#city,#hospital').html();
        }
    })
    .on('blur',function(){

        var v = $(this).val();
        if(v.length >= 1){
            showkeylistdo()
            if(v.length >= 2){
                keysearch(v);
            }
            
        }else{
            showselectarea()
        }
    });

    $('#serchkeywords_form').on('submit', function() {
        $('#serchkeywords').blur();
        return false;
    });
    function showkeylistdo(){
        showselect.css({'display':'none'});
        showkeylist.css({'display':'block'});
    }
    function showselectarea(){
        showselect.css({'display':'block'});
        showkeylist.css({'display':'none'});
    }

    function keysearch(key){
        var url  = _ip+'/project/searchProject?chineseName='+ key;
        $.ajax({
            url:url,
            type : "GET",
            xhrFields: {
                withCredentials: true
            },
            crossDomain: true,
            dataType: 'json',
            contentType:'application/json',
            success:function(data){
                if(data.success){
                    var h = '';
                    var data = data.data;
                    if(data && data.length){
                        for(var k = 0, kk = data.length; k < kk ;k ++){
                            h += '<li>'+ data[k].area +'／'+data[k].province+'／'+data[k].city+'／'+data[k].name+'<input value="'+data[k].id+'" type="hidden" /></li>';
                        }
                        $('#keyul').html(h);
                    }else{
                        $('#keyul').html('没有匹配到！');
                    }
                    
                }else{
                    alert(data.message);
                }
            }
        })
   }
   $('#keyul').on('click','li',function(){
       var id = $(this).find('input').val();
       geihospitaldetaildata(id)
       $('#serchkeywords').val($(this).text() );
   })
</script>
</body>
</html>